<template>
	<div style="display: flex;flex-direction: column;" class="w-ipt">
		<div>
			<el-upload action="" :before-upload="beforeVersion" :on-exceed="onlyVersion" :on-success="successVersion"
				:on-progress="versionProcess" :on-remove="removeVersion" :limit="1" :auto-upload="false"
				ref="uploadVersion">
				<el-button size="small" type="primary" :disabled="is_percentage == true">选择包
				</el-button>
			</el-upload>
		</div>
		<div>
			<el-progress v-if="is_percentage == true" :text-inside="true" :stroke-width="15" :percentage="percentage">
			</el-progress>
		</div>
		<div>
			<el-button size="small" type="primary" @click="versionUpload" :disabled="is_percentage == true">已确认文件，立即上传
			</el-button>
		</div>
	</div>
</template>

<script>
	import API from '@/api/index.js'
	import md5 from 'blueimp-md5'
	import COS from 'cos-js-sdk-v5'

	export default {
		data() {
			return {
				// 上传
				upload_loading: false, // 上传加载
				suffix: '', // 后缀
				version_file: '', // 文件内容
				version_name: '', // 文件名字
				version_file_name: '', // 加密后的文件名字
				upload_sign: null, // 获取的后台验证
				is_percentage: false,
				percentage: 0, // 进度条
				href: ''
			}
		},
		mounted() {
			this.getUploadToken();
		},
		methods: {
			// 上传
			// 上传之前
			removeVersion() {
				let self = this;
				self.is_percentage = false;
				self.percentage = 0;
			},
			// 上传之前
			beforeVersion(file) {
				let self = this;
				self.version_file = file;
				self.version_name = md5(JSON.stringify(file)).substring(md5(JSON.stringify(file)).length-16);
				self.suffix = file.name.substring(file.name.lastIndexOf('.') + 1);
				self.version_file_name = `${self.version_name}.${self.suffix}`;
			},
			// 上传成功
			successVersion() {
				let self = this;
				self.$message.success("上传版本成功");
			},
			// 进度条
			versionProcess(event) {
				let self = this;
				self.is_percentage = true;
				self.percentage = (event.loaded / event.total * 100 | 0);
			},
			// 只能上传一个
			onlyVersion() {
				let self = this;
				self.$message.error('只能上传一个文件');
			},
			// 点击上传文件
			versionUpload() {
				let self = this;
				self.$refs.uploadVersion.submit();
				self.$message.success('正在上传文件，请稍后');
				self.upload_loading = true;
				let cos = new COS({
					getAuthorization(options, callback) {
						callback({
							TmpSecretId: self.upload_sign.Credentials.TmpSecretId,
							TmpSecretKey: self.upload_sign.Credentials.TmpSecretKey,
							SecurityToken: self.upload_sign.Credentials.Token,
							ExpiredTime: self.upload_sign.ExpiredTime
						});
					}
				});
				cos.putObject({
					Bucket: 'anyuchuzuwu-1301548258',
					Region: 'ap-guangzhou',
					Key: 'firemare/' + self.version_file_name,
					StorageClass: 'STANDARD',
					Body: self.version_file, // 上传文件对象
				}, function(err, data) {
					if (err) {
						self.upload_loading = false;
						self.$notify.error({
							message: '上传失败'
						});
						return false;
					}
					if (data) {
						self.$notify.success({
							message: '上传成功',
						});
						self.upload_loading = false;
						self.href = 'https://' + data.Location;
						self.$emit('getHref', {
							href: self.href
						});
					}
				})
			},

			// 重置上传信息
			resetUpload() {
				let self = this;
				self.$refs.uploadVersion.clearFiles();
				self.href = '';
				self.is_percentage = false;
				console.log('quxiao')
			},

			// 获取上传token
			getUploadToken() {
				let self = this;
				API.cosToken().then(res => {
					self.upload_sign = res.data;
				})
			}

		}
	}
</script>

<style>
</style>
